<template>
	<view class="content">
		<view class="item" v-for="(item ,index) in list" @click="navRoute(3,{user_id:item.id,user_type:item.user_type})">
			<view class="item_text">
				<image :src="item.pic" mode=""></image>
				<view class="name">
					{{item.user}}
				</view>
			</view>
			<view class="attention" v-if="type!=1" @click="setAttention(item.id,index)" :key="index" :style="{background:item.atten_zt==1?'#ccc':''}">
				{{item.atten_zt==1?'已互相关注':'互相关注'}}
			</view>
		</view>
<u-empty v-if="!list.length" :text="type==1?'暂无关注用户':'暂无粉丝'" mode="list" margin-top="200"></u-empty>
	<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				type:''
			}
		},
		onLoad(e) {
			this.type=e.type
			this.newData(e.type)
		},
		methods: {
			navRoute(code, item) {
				uni.navigateTo({
					url: `./myHomepage?code=${code}&item=${JSON.stringify(item)}`
				});
			},
			newData(type) {
				this.$myRuquest('home/Forums/atten_user', {
					type: type
				}).then(res => {
					if (res.code == 400) {
						this.list = res.data
					}
				})
			},
			setAttention(id,index) {
				this.$myRuquest('home/Forums/forums_atten', {
					user_id: id,
					user_type: this.list[index].user_type
				}, 'POST').then(res => {
					if (res.code == 400) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success'
						})
					this.list[index].atten_zt=	this.list[index].atten_zt==1?0:1
					}else{
						this.$refs.uToast.show({
							title: res.msg,
							type:'warning '
						})
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.content{
		background-color: rgb(247,247,247);
		min-height: 100vh;
		padding-top: 20upx;
	}
	.item {
		display: flex;
		padding: 20upx;
		background-color: #fff;
		border-radius: 12upx;
margin:10upx 20upx;
margin-top: 0;
		.item_text {
			display: flex;
			font-size: 28upx;
			font-weight: 900;
view{
	line-height: 80upx;
}
			image {
				width: 80upx;
				height: 80upx;
				border-radius: 50%;
				margin-right: 20upx;
			}
		}



		.attention {
			padding: 5upx 20upx;
			background: linear-gradient(to right, rgb(254, 189, 140), rgb(254, 28, 77));
			position: absolute;
			right: 40upx;
			top: 60upx;
			color: #fff;
			border-radius: 8upx;
			font-size: 24upx;
		}
	}
</style>
